<template>
    <div class="operateBtns clearfloat m-b no-padding-top">
        <div v-for="element in elements" class="fl m-r-sm">
            <div class="" v-if="element.type == 'button'">
                <button class="btn btn-sm {{element.class}}" type="element.type"
                        @click="element.events.clicker(element.value)">
                    <i class="fa fa-{{element.icon}}"></i>
                    {{element.name}}
                </button>
            </div>

            <div class="input-group w-md" v-if="element.type == 'search'">
                <input type="text" v-model="element.value"
                       class="form-control input-sm bg-light no-border rounded padder ng-pristine ng-valid ng-touched {{element.class}}"
                       placeholder="{{element.placeholder}}" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-34-8309">
                <span class="input-group-btn" @click="element.events.submitter(element.value)">
                    <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
                </span>
            </div>
            <div class="btn-group dropdown" v-if="element.type == 'dropdown'">

                <dropdown>
                    <button class="btn btn-dark btn-sm" slot="button" >{{element.name}} <span class="caret"></span></button>
                    <ul slot="dropdown-menu" class="dropdown-menu">
                        <li><a href="javascript:void(0)" @click="element.events.chooser(item.name,item.value,item,element)" v-for="item in element.items">{{item.name}}</a></li>
                    </ul>
                </dropdown>

            </div>

            <div class="dropdown-more dropdown" v-if="element.type == 'buttons'">

                <dropdown>
                    <button class="btn btn-dark btn-sm" slot="button" ><i class="glyphicon glyphicon-{{element.icon}}"></i> {{element.name}} <span class="fa fa-caret-down" style="margin-left: 15px !important;"></span></button>
                    <ul slot="dropdown-menu" class="dropdown-menu dropdown-content">
                        <li v-for="item in element.items" :class="{'btn-forbidden':item.disabled}" @click="item.events.clicker(item.value)">
                            <button href="" class="text-sm" :disabled="item.disabled"><i class="fa fa-{{item.icon}}"></i>{{item.name}}</button>
                        </li>
                    </ul>
                </dropdown>

            </div>

        </div>

    </div>
</template>

<style lang="sass">

</style>

<script>

    import {dropdown} from 'vue-strap';

    export default {
        replace: true,
        props: {
            elements: {
                type: Array,
                default: function _default() {
                    return [];
                }
            }
        },
        data (){
            return {

            }
        },
        ready (){

        },
        methods:{

        },
        components:{
            dropdown
        }
    }

</script>
